<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商分析看板</title>
    <!-- 引入外部资源 -->
    <script src="../public/js/tailwindcss3.4.16"></script>
    <link href="../font-awesome/css/all.min.css" rel="stylesheet">
    <script src="../chart.umd.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style>
    /* 折叠时隐藏侧边栏文字，仅显示图标 */
    .sidebar-collapsed span,
    .sidebar-collapsed .text-xs,
    .sidebar-collapsed .font-semibold,
    .sidebar-collapsed h1 {
        display: none !important;
    }
    .sidebar-collapsed nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <!-- 侧边栏折叠/展开按钮 -->
            <button id="toggleSidebar" class="mr-2 text-primary text-2xl focus:outline-none">
                <i class="fa fa-bars"></i>
            </button>
            <h1 class="text-xl font-bold text-primary">供应商分析看板</h1>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索指标..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">5</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="../public/image/user.jpg" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="text-sm font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<!-- 侧边栏导航 -->
<aside id="sidebar" class="fixed top-0 left-0 bottom-0 w-64 bg-white pt-16 nav-shadow z-40 transition-all duration-300 ease-in-out transform">
    <div class="h-full overflow-y-auto scrollbar-hide">
        <nav class="p-4 space-y-1">
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析维度</div>

            <a href="#supplier-supply" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-truck text-lg w-5 text-center"></i>
                <span>供应商供货分析</span>
            </a>

            <a href="#supplier-structure" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>供应商结构分析</span>
            </a>

            <a href="#financial" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-money-bill text-lg w-5 text-center"></i>
                <span>财务相关</span>
            </a>

            <a href="#quality-delivery" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-check-circle text-lg w-5 text-center"></i>
                <span>质量与交付</span>
            </a>

            
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析看板</div>
            
            <a href="../客户分析看板html5/customer.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-users text-lg w-5 text-center"></i>
                <span>1.客户</span>
            </a>
            <a href="../供应商分析看板html5/supplier.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-truck text-lg w-5 text-center"></i>
                <span>2.供应商</span>
            </a>
            <a href="../物资分析看板html5/materials.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cubes text-lg w-5 text-center"></i>
                <span>3.物资</span>
            </a>
            <a href="../产品分析看板html5/product.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cube text-lg w-5 text-center"></i>
                <span>4.产品</span>
            </a>
            <a href="../人员分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-user-friends text-lg w-5 text-center"></i>
                <span>5.人员</span>
            </a>
            <a href="../业务领域分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>6.业务领域</span>
            </a>
            <a href="../型号项目成本分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calculator text-lg w-5 text-center"></i>
                <span>7.型号项目成本</span>
            </a>
            <a href="../财务指标分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>8.财务指标</span>
            </a>
            <a href="../固定资产投资效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>9.固定资产投资效果</span>
            </a>
            <a href="../研发创新效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-flask text-lg w-5 text-center"></i>
                <span>10.研发创新效果</span>
            </a>
        </nav>
    </div>
</aside>

<!-- 主内容区 -->
<main id="mainContent" class="pt-16 pb-10 pl-64 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">时间范围:</span>
                        <select id="timeRange" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="week">最近7天</option>
                            <option value="month" selected>最近30天</option>
                            <option value="quarter">最近90天</option>
                            <option value="year">最近12个月</option>
                            <option value="custom">自定义...</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">供应商分级:</span>
                        <select id="supplierLevel" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部级别</option>
                            <option value="a">A级供应商</option>
                            <option value="b">B级供应商</option>
                            <option value="c">C级供应商</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">供应商类别:</span>
                        <select id="supplierCategory" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部类别</option>
                            <option value="raw">原材料供应商</option>
                            <option value="component">零部件供应商</option>
                            <option value="service">服务供应商</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">供应商规模:</span>
                        <select id="supplierSize" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部规模</option>
                            <option value="large">大型企业</option>
                            <option value="medium">中型企业</option>
                            <option value="small">小型企业</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">供应商类型:</span>
                        <select id="supplierType" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部类型</option>
                            <option value="domestic">国内供应商</option>
                            <option value="foreign">国外供应商</option>
                            <option value="joint">合资供应商</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center">
                    <button id="applyFilter" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i>
                        <span>应用筛选</span>
                    </button>
                    <button id="resetFilter" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 一级驾驶舱 - 供应商供货分析 -->
        <section id="supplier-supply" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">供应商供货分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- RFM基础指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('recency')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">平均最近供货天数</h3>
                        <i class="fa fa-calendar text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">12.5</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -2.1%</span>
                        <span class="text-warning">环比 +1.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('frequency')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">平均供货频率</h3>
                        <i class="fa fa-repeat text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">8.2</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.8%</span>
                        <span class="text-success">环比 +1.5%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('monetary')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">平均供货金额</h3>
                        <i class="fa fa-rmb text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">¥2.8M</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +7.3%</span>
                        <span class="text-success">环比 +2.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('avgOrder')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">单次供货金额</h3>
                        <i class="fa fa-shopping-cart text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">¥342K</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +4.1%</span>
                        <span class="text-warning">环比 -1.2%</span>
                    </div>
                </div>
            </div>

            <!-- 综合指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('rfmScore')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">RFM总分平均值</h3>
                        <i class="fa fa-star text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">3.8</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2.5%</span>
                        <span class="text-success">环比 +0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('highValueRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">高价值供应商占比</h3>
                        <i class="fa fa-diamond text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">28.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +1.8%</span>
                        <span class="text-success">环比 +0.5%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('importantMaintain')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">重要保持供应商数量</h3>
                        <i class="fa fa-users text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">156</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +12.5%</span>
                        <span class="text-success">环比 +3.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('supplyTrend')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供货金额趋势</h3>
                        <i class="fa fa-line-chart text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">上升</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">总金额 +7.3%</span>
                        <span class="text-success">单次 +4.1%</span>
                    </div>
                </div>
            </div>

            <!-- 趋势图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">RFM总分平均值趋势</h3>
                        <button onclick="showDetail('rfmTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="rfmTrendChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供货金额与变化率趋势</h3>
                        <button onclick="showDetail('supplyTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="supplyTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 供应商结构分析 -->
        <section id="supplier-structure" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">供应商结构分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 供应商分类占比卡片（环形图+辅助表） -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供应商分类占比</h3>
                        <button onclick="showDetail('supplierCategory')" class="text-primary text-sm hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-72 flex items-center justify-center">
                            <canvas id="supplierTypeChart"></canvas>
                        </div>
                        <div class="overflow-y-auto max-h-72 scrollbar-hide">
                            <table class="w-full">
                                <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2 text-sm font-medium text-gray-600">供应商类型</th>
                                    <th class="text-right py-2 text-sm font-medium text-gray-600">占比</th>
                                    <th class="text-right py-2 text-sm font-medium text-gray-600">数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
                                    <td class="py-2 text-sm">重要价值供应商</td>
                                    <td class="py-2 text-sm text-right">28.5%</td>
                                    <td class="py-2 text-sm text-right">285</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
                                    <td class="py-2 text-sm">重要保持供应商</td>
                                    <td class="py-2 text-sm text-right">22.3%</td>
                                    <td class="py-2 text-sm text-right">223</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
                                    <td class="py-2 text-sm">重要发展供应商</td>
                                    <td class="py-2 text-sm text-right">18.7%</td>
                                    <td class="py-2 text-sm text-right">187</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
                                    <td class="py-2 text-sm">重要挽留供应商</td>
                                    <td class="py-2 text-sm text-right">15.2%</td>
                                    <td class="py-2 text-sm text-right">152</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
                                    <td class="py-2 text-sm">一般价值供应商</td>
                                    <td class="py-2 text-sm text-right">8.8%</td>
                                    <td class="py-2 text-sm text-right">88</td>
                                </tr>
                                <tr class="hover:bg-gray-50 cursor-pointer">
                                    <td class="py-2 text-sm">低价值供应商</td>
                                    <td class="py-2 text-sm text-right">6.5%</td>
                                    <td class="py-2 text-sm text-right">65</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">高价值供应商TOP10</h3>
                        <button onclick="showDetail('topSuppliers')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64 overflow-y-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2">排名</th>
                                    <th class="text-left py-2">供应商名称</th>
                                    <th class="text-right py-2">供货金额</th>
                                    <th class="text-right py-2">RFM评分</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">1</td>
                                    <td class="py-2 font-medium">供应商A</td>
                                    <td class="py-2 text-right">¥286,500</td>
                                    <td class="py-2 text-right">4.8</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">2</td>
                                    <td class="py-2 font-medium">供应商B</td>
                                    <td class="py-2 text-right">¥254,300</td>
                                    <td class="py-2 text-right">4.6</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">3</td>
                                    <td class="py-2 font-medium">供应商C</td>
                                    <td class="py-2 text-right">¥218,700</td>
                                    <td class="py-2 text-right">4.5</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">4</td>
                                    <td class="py-2 font-medium">供应商D</td>
                                    <td class="py-2 text-right">¥195,200</td>
                                    <td class="py-2 text-right">4.3</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">5</td>
                                    <td class="py-2 font-medium">供应商E</td>
                                    <td class="py-2 text-right">¥182,400</td>
                                    <td class="py-2 text-right">4.2</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 新增：供应商类型帕累托分析、供应商帕累托分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供应商类型帕累托分析</h3>
                    </div>
                    <div class="h-72">
                        <canvas id="supplierTypeParetoChart"></canvas>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供应商帕累托分析</h3>
                    </div>
                    <div class="h-72">
                        <canvas id="supplierParetoChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 财务相关 -->
        <section id="financial" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">财务相关</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 财务指标卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('paymentRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供给及时率</h3>
                        <i class="fa fa-clock-o text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">94.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2.1%</span>
                        <span class="text-success">环比 +0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('priceChange')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供货单价变动率</h3>
                        <i class="fa fa-tags text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">+2.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +1.5%</span>
                        <span class="text-success">环比 +0.3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('quantityChange')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供货数量变动率</h3>
                        <i class="fa fa-cubes text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">+6.7%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-success">环比 +2.1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('totalAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">累计合作金额</h3>
                        <i class="fa fa-money text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥8.5M</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +15.3%</span>
                        <span class="text-success">环比 +6.8%</span>
                    </div>
                </div>
            </div>

            <!-- 应收款和票据指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('receivables')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">应付款金额</h3>
                        <i class="fa fa-credit-card text-danger"></i>
                    </div>
                    <p class="text-2xl font-bold">¥456K</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-warning">同比 +8.2%</span>
                        <span class="text-success">环比 -2.1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('billRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">票据支付占比</h3>
                        <i class="fa fa-file-text text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">18.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-warning">同比 +3.2%</span>
                        <span class="text-success">环比 -1.5%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('inventory')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供应商库存周转率</h3>
                        <i class="fa fa-warehouse text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">12.5</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-success">环比 +2.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('financialTrend')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">财务趋势</h3>
                        <i class="fa fa-line-chart text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">良好</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">及时率 94.2%</span>
                        <span class="text-success">应付款下降</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 质量与交付 -->
        <section id="quality-delivery" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">质量与交付</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('qualityRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供货合格率</h3>
                        <i class="fa fa-check-circle text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">98.7%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +0.5%</span>
                        <span class="text-success">环比 +0.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('deliveryCycle')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">平均供货周期</h3>
                        <i class="fa fa-clock-o text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">15.5天</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -2.1天</span>
                        <span class="text-success">环比 -0.8天</span>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('productTypes')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供货产品种类数</h3>
                        <i class="fa fa-cube text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">156</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +12.5%</span>
                        <span class="text-success">环比 +3.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('newProducts')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">新品供货数量</h3>
                        <i class="fa fa-flask text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">89</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +18.7%</span>
                        <span class="text-success">环比 +5.4%</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

<!-- 穿透查询模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">详细分析</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5 overflow-y-auto flex-1" id="modalContent">
            <!-- 这里将通过JavaScript动态填充内容 -->
        </div>
        <div class="p-5 border-t border-gray-200 flex justify-end">
            <button id="closeModalBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="supplier.js"></script>
</body>
</html> 